<template>
    <!--后台主页框架页面-->
    <div>
        <!--头部-->
        <BackStageHeader/>
        <!--主题-->
        <div style="display:flex;">
            <!--侧边栏-->
            <Aside/>
            <!--内容区-->
            <div class="home" style="padding: 10px;flex: 1">
                <!--功能区-->
                <div style="margin: 10px 0">
                    <el-button type="primary" @click="add()">新增</el-button>
                    <el-button type="primary">导入</el-button>
                    <el-button type="primary">导出</el-button>
                </div>
                <!--搜索-->
                <div style="margin: 10px 0;">
                    <el-input
                        v-model="search"
                        class="w-50 m-2"
                        size="large"
                        placeholder="请输入关键字"
                        style="width: 200px"
                        clearable
                    />
                    <el-button type="primary" @click="load()" style="margin-left: 5px;">查询</el-button>
                </div>
                <!--<el-button>按钮</el-button>-->
                <el-table :data="tableData" border style="width: 100%;" stripe>
                    <el-table-column prop="id" label="ID" sortable="true"/>
                    <el-table-column prop="username" label="用户名"/>
                    <el-table-column prop="login" label="登入账号"/>
                    <el-table-column prop="roleId" label="权限"/>
                    <el-table-column prop="headPic" label="头像"/>
                    <el-table-column prop="name" label="姓名"/>
                    <el-table-column prop="sex" label="性别"/>
                    <el-table-column prop="created" label="创建时间"/>
                    <el-table-column prop="address" label="地址"/>
                    <el-table-column prop="phoneNumber" label="电话号"/>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template #default="scope">
                            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
                                <template #reference>
                                    <el-button size="mini" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin: 10px 0;">
                    <el-pagination
                        v-model:currentPage="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[5, 10, 20, 30]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                    <el-dialog
                        v-model="dialogVisible"
                        title="提示"
                        width="30%"
                        :before-close="handleClose">
                        <el-form :model="form" label-width="120px">
                            <el-form-item label="ID" style="display: none">
                                <el-input v-model="form.id" style="width: 80%;"></el-input>
                            </el-form-item>
                            <el-form-item label="用户名">
                                <el-input v-model="form.username" style="width: 80%;"></el-input>
                            </el-form-item>
                            <el-form-item label="登入账号">
                                <el-input v-model="form.login" style="width: 80%;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="权限">
                                <el-input v-model="form.roleId" style="width: 80%;"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="form.name" style="width: 80%;"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-radio v-model="form.sex" label="男">男</el-radio>
                                <el-radio v-model="form.sex" label="女">女</el-radio>
                                <el-radio v-model="form.sex" label="未知">未知</el-radio>
                            </el-form-item>
                            <el-form-item label="地址">
                                <el-input type="textarea" v-model="form.address" style="width: 80%;"></el-input>
                            </el-form-item>
                            <el-form-item label="电话号">
                                <el-input v-model="form.phoneNumber" style="width: 80%;"></el-input>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                          <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="save()">确定</el-button>
                          </span>
                        </template>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
import BackStageHeader from '@/components/backstage/BackStageHeader'
import Aside from "@/components/backstage/Aside";

export default {
    name: "BackStageHome",
    components: {
        BackStageHeader,
        Aside
    },
    data() {
        return {
            form: {},
            //弹窗默认关闭
            dialogVisible: false,
            search: '',
            //当前页码
            currentPage: 1,
            //每页条数
            pageSize: 5,
            //总条数
            total: 10,
            tableData: []
        }
    },
    created() {
        this.load()
    },
    methods: {
        load() {
            request.get("http://localhost:9090/backstage/getUsers", {
                params: {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    search: this.search
                }
            }).then(res => {
                this.tableData = res.data.dataList;
                this.total = res.data.dataCount;
            })
        },
        add() {
            //显示弹窗
            this.dialogVisible = true
            //清空弹窗内容
            this.form = {}
        },
        save() {
            this.form.created = null;
            if (this.form.id === undefined) {
                request.put("/backstage/insertUser", this.form).then(res => {
                    if (res.message === "成功") {
                        this.$message({
                            type: "success",
                            message: "新增成功,初始密码为：123456"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.message
                        })
                    }
                    //刷新表格数据
                    this.load()
                })
            } else {
                request.post("/backstage/updateUser", this.form).then(res => {
                    if (res.message === "成功") {
                        this.$message({
                            type: "success",
                            message: "修改成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.message
                        })
                    }
                    //刷新表格数据
                    this.load()
                })
            }
            //清空表格
            this.form = {};
            this.dialogVisible = false;
        },
        handleEdit(row) {
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
        },
        //删除
        handleDelete(id) {
            request.delete("http://localhost:9090/backstage/deleteUser/" + id).then(res => {
                if (res.message === "成功") {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    })
                } else {
                    this.$message({
                        type: "error",
                        message: res.msg
                    })
                }
                //刷新表格数据
                this.load();
            })
        },
        //改变当前pageSize触发
        handleSizeChange(pageSize) {
            this.currentPage = 1;
            this.pageSize = pageSize;
            this.load();
        },
        //改变当前页触发
        handleCurrentChange(pageNum) {
            this.currentPage = 1;
            this.currentPage = pageNum;
            this.load();
        },
    }
}
</script>

<style scoped>

</style>